<template>
  <el-card class="club-info">
    <!-- 社团图片 -->
    <img class="club-image" :src="club?.logoUrl" alt="社团图片">

    <!-- 社团名称和介绍 -->
    <div class="club-text-info">
      <h1 class="club-name">{{ club?.clubName || '加载中...' }}</h1>
      <p class="club-introduction">{{ club?.clubDescription || '暂无介绍' }}</p>
    </div>

    <el-divider></el-divider>

    <div class="key-information">
      <el-descriptions title="关键信息" :column="{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }" border>
        <el-descriptions-item label="所属类别">{{ club?.category || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ club?.leaderName || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ club?.publishTime || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="现有人数">{{ club?.currentMembers || '未知' }}</el-descriptions-item>
        <el-descriptions-item label="所需条件">{{ club?.requirements || '未知' }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>

<script>
import { ElCard, ElDescriptions, ElDescriptionsItem, ElDivider } from 'element-plus';

export default {
  name: 'ClubLeftComponent',
  props: {
    club: {
      type: Object,
      required: true
    }
  },
  components: {
    ElCard,
    ElDescriptions,
    ElDescriptionsItem,
    ElDivider
  }
};
</script>
<style scoped>
/* 基础布局和样式 */
.club-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  max-width: 500px; /* 限制最大宽度 */
  height: 700px;
  overflow: auto;
}

/* 社团图片样式 */
.club-image {
  width: 120px; /* 减小图片大小 */
  height: 120px; /* 保持宽高比 */
  margin-bottom: 20px;
  border: 1px solid #ddd; /* 简单的边框 */
}

/* 社团文本信息样式 */
.club-text-info {
  text-align: center;
  margin-bottom: 30px; /* 增加与关键信息的间距 */
}

.club-name {
  font-size: 22px;
  color: #333;
  margin-bottom: 5px;
}

.club-introduction {
  white-space: pre-wrap;
  font-size: 16px;
  color: #666;
  text-align: left; /* 确保文本居左 */
  max-width: 80%; /* 限制介绍文本宽度，防止过宽 */
  margin: 0 auto; /* 水平居中文本块 */
}

/* 关键信息容器样式 */
.key-information {
  word-break: break-word;
  width: 100%;
  max-width: 600px; /* 可以调整为更大的宽度限制 */
  margin: 30px auto 20px; /* 上边距30px，左右自动（居中），下边距20px */
  padding: 20px; /* 容器内边距 */
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* 确保padding不会增加容器的总宽度 */
}

/* 描述列表样式，确保与容器内边距相等 */
.descriptions-equal-spacing {
  margin-left: -20px; /* 与容器左边距相等 */
  margin-right: -20px; /* 与容器右边距相等 */
}

/* 描述列表项样式 */
.el-descriptions {
  width: 100%;
  max-width: 600px; /* 可以调整为更大的宽度限制 */
  margin-bottom: 20px; /* 增加与下方描述项的间距 */
  padding: 0;
  background: none; /* 去掉背景色 */
  border: none; /* 去掉边框 */
  box-shadow: none; /* 去掉阴影 */
}

.el-descriptions__label {
  font-size: 18px; /* 增加标签字体大小 */
  color: #333;
  padding: 10px 0; /* 增加标签的内边距 */
}

.el-descriptions__label i.el-icon {
  margin-right: 15px; /* 增加图标与文本间距 */
  font-size: 24px; /* 增加图标大小 */
}

.el-descriptions__content {
  font-size: 20px; /* 增加内容字体大小 */
  color: #666;
  padding: 10px 0; /* 增加内容的内边距 */
}

/* 去除Element Plus默认的边框和圆角 */
.el-card {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* 添加关键信息容器的间距 */
.key-information {
  margin-top: 30px; /* 关键信息容器与上方的间距 */
  word-break: break-word;
}

/* 为关键信息添加边框 */
.key-information-container {
  border: 1px solid #ddd; /* 设置边框颜色 */
  border-radius: 8px; /* 设置边框圆角 */
  padding: 20px; /* 添加内边距 */
  width: 100%; /* 关键信息容器宽度 */
  margin-bottom: 20px; /* 关键信息容器与下方的间距 */
  text-align: center; /* 居中对齐 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  display: inline-block;
  margin: 0 auto; /* 使关键信息容器水平居中 */
  word-break: break-all; /* 当内容超出容器宽度时自动换行 */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

/* 调整描述列表项的宽度 */
.el-descriptions {
  width: 100%; /* 宽度自适应 */
  max-width: 600px;
}
</style>
